<template>
  <div class="flex-row flex-deviceinfo">
    <div class="flex-row flex-two-info panel panel-default" v-for="row in devicesinfo">
      <avatar-upload :img-src.sync="row.img.content" :filename.sync="row.img.filename "></avatar-upload>
      <form class="form-horizontal" style="flex: 1;">
        <div class="form-group auto"  style="margin-top: 10px;margin-left: 10px;">
          <div class="col-sm-6" style="padding-right: 5px;" id=userfiles-useDevInf-设备类型>
            <v-select :value.sync="row.f_devices_type" v-model="row.f_devices_type"
                :options='devicetypes' placeholder='设备类型'
                close-on-select></v-select>
          </div>
          <div class="col-sm-6" style="padding-right: 5px;">
            <input type="text" class="form-control" v-model="row.f_devices_no" placeholder='设备编号' v-next-el="{id: $index+'brand'}" >
          </div>
        </div>
        <div class="form-group auto"  style="margin-left: 10px;">
          <div class="col-sm-6" style="padding-right: 5px;">
            <input type="text" class="form-control" v-model="row.f_brand" placeholder='设备品牌' v-next-el="{id: $index+'devicesmodel'}"   :id="$index+'brand'">
          </div>
          <div class="col-sm-6" style="padding-right: 5px;">
            <input type="text" class="form-control" v-model="row.f_devices_model" placeholder='设备型号'  :id="$index+'devicesmodel'">
          </div>
        </div>
        <div class="form-group auto"  style="margin-left: 10px;">
          <div class="col-sm-6" style="padding-right: 5px;">
            <input type="number" class="form-control" v-model="row.f_devices_num" placeholder='设备数量'   :id="$index+'devicesnum'">
          </div>
        </div>
        <div class="form-group auto"  style="margin-left: 10px;">
            <div class="col-sm-12" style="padding-right: 5px;">
            <datepicker  placeholder="安装日期"
              v-model="row.f_install_date"
              :value.sync="row.f_install_date"
              :format="'yyyy-MM-dd HH:mm:ss'">
            </datepicker>
          </div>
        </div>
      </form>
      <img :src="imgdelete" alt="图片加载失败" class="img-rounded" style="width: 60px;padding: 20px;margin-left: -15px;cursor: pointer;"
      @click="deleteDevice($index, row)" v-if="row.f_devices_state !== '有效'">
    </div>
    <div class="panel panel-default flex-two-info text-center" style="line-height: 164px;">
      <img :src="imgadd" alt="图片加载失败" class="img-rounded" style="width: 60px;padding: 10px;cursor: pointer;" @click="addDevice()">
    </div>
  </div>
</template>

<script>
import AppData from '../../stores/AppData'
import * as Util from '../Util'

export default {
  title: '设备信息',
  data () {
    return {
      imgdelete: '/images/mainicon/deletedevice.png',
      imgadd: '/images/mainicon/adddevice.png'
    }
  },
  props: ['devicesinfo', 'userinfoid'],
  methods: {
    deleteDevice (index, row) {
      this.devicesinfo.splice(index, 1)
    },
    addDevice () {
      this.devicesinfo.push({f_devices_type: '家用灶具',
      f_userinfo_id: this.userinfoid,
      f_install_date: Util.toStandardTimeString()})
    }
  },
  computed: {
    devicetypes () {
      return AppData.getParam('设备类型')
    }
  }
}
</script>
<style lang="less">
  .flex-deviceinfo {
    padding: 0px 20px;
    justify-content: space-between;
    height: auto;
    flex-wrap: wrap;
  }
  .flex-two-info {
    margin-bottom: 10px;
    align-items: center;
    width: 48%;
  }
</style>
